<template>
	<div>
		<div class="content">
			<div class="bgimg">
				<div class="main">
					<p class="mp1">行 程 安 排</p>
					<p class="mp2">清晰有序 灵活兼具</p>
					<br>
					<hr>
					<p class="mp3">保证行程的简单易读一直是我们所关注的重中之重！它需要及时到达你面前并为你提供清晰的指引。</p>
					<p class="mp4">与此同时，工具的属性让它变得更灵活，随时随地可调整，使其面对旅途时的突发状况也能轻松应对。
					</p>
				</div>
			</div>
		</div>
		<div class="content2">
			<div class="bgimg">
				<div class="main">

				</div>
			</div>
		</div>
		<div class="content3">
			<div class="img">
				<div class="main">
					<p class="mp1">景 点 资 讯</p>
					<p class="mp2">简单明了往往超级有效</p>
					<br>
					<hr>
					<p class="mp3">想象一下，当你站在闹市街头查阅目的地信息时，面对大段文字和花哨的图片还能否高效的找到所需？此时简单明了的信息呈现或许能为你带来意想不到的效果。</p>
					<p class="mp4">化繁为简是我们坚持的方向，摒弃多余元素，只呈现关键信息往往能让你更有效的达成目的。
					</p>
				</div>
			</div>
		</div>
		<div class="content4">
			<div class="box">
				<div class="phone">
				</div>
				<div class="main">
					<p class="mp1">地 图 导 航</p>
					<p class="mp2">导航与行程的完美结合</p>
					<br>
					<hr>
					<p class="mp3">地图导航导航与行程的完美结合免去手动输入的麻烦轻松实现我到景点、景点到景点之间的快速导航，与行程的完美结合把导航的功效发挥到了最大。</p>

				</div>
			</div>
			<div class="text"></div>
		</div>
		<div class="bottom">
			<div class="main">
				<p class="mp1">清 单 & 记 账</p>
				<p class="mp2">小功能亦能派上大用场</p>
				<br>
				<hr>
				<p class="mp3">不用在各个应用之间来回切换，在这里，记录着你旅行时的点点滴滴。善加利用，这两个容易被忽视的小功能时常能在关键时刻派上大用场！</p>
			</div>
			<div class="bottomimg">
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'SelfRoute',

	}
</script>

<style scoped="scoped">
	.content {
		width: 100%;
		height: 800px;
		background-color: #f5f5f5;
	}

	.content2 {
		width: 100%;
		height: 960px;
		background-color: #f5f5f5;
	}

	.content .bgimg {
		position: relative;
		width: 1200px;
		height: 800px;
		margin: 0 auto;
		background-image: url(../assets/images/route1.png);
	}

	.content .main {
		position: absolute;
		left: 15%;
		top: 20%;
		width: 250px;
		margin: 0 auto;
	}

	.content .main .mp1 {
		font-size: 50px;
		font-weight: 700;
	}

	.content .main .mp2 {
		font-size: 25px;
		color: #33CC99;

	}

	.content .main .mp3,
	.content .main .mp4 {
		margin-top: 35px;
		font-size: 17px;
		color: #000000;
	}

	.content2 .bgimg {
		position: relative;
		width: 1200px;
		height: 960px;
		margin: 0 auto;
		background-image: url(../assets/images/route2.jpg);
	}

	.content2 .main {
		position: absolute;
		right: 15%;
		width: 274px;
		height: 760px;
		margin: 0 auto;
		background-image: url(../assets/images/route3.png);
	}

	.content2 .main .mp1 {
		font-size: 50px;
		font-weight: 700;
	}

	.content2 .main .mp2 {
		font-size: 25px;
		color: #33CC99;

	}

	.content2 .main .mp3,
	.content2 .main .mp4 {
		margin-top: 35px;
		font-size: 17px;
		color: #000000;
	}

	.content3 {
		position: relative;
		width: 1900px;
		height: 800px;
		margin: 0 auto;
	}

	.content3 .img {
		/* width: 2560px; */
		height: 800px;
		margin-left: -310px;
		background-image: url(../assets/images/route4.jpg);
	}



	.content3 .main .mp1 {
		font-size: 50px;
		font-weight: 700;
		color: white;
	}

	.content3 .main .mp2 {
		font-size: 25px;
		color: #33CC99;

	}

	.content3 .main .mp3,
	.content3 .main .mp4 {
		margin-top: 35px;
		font-size: 17px;
		color: #C5C6C6;
	}

	.content3 .main {
		position: absolute;
		left: 25%;
		top: 20%;
		width: 250px;
		margin: 0 auto;
	}

	.content4 {
		width: 100%;
		height: 1670px;
		padding-top: 100px;
		background-image: url(../assets/images/route6.png);
	}

	.content4 .box {
		position: relative;
		width: 1200px;
		height: 760px;
		margin: 0 auto;
	}

	.content4 .phone {
		position: absolute;
		left: 15%;
		width: 860px;
		height: 660px;
		margin: 0 auto;
		background-image: url(../assets/images/route5.jpg);
		background-repeat: no-repeat;
	}

	.content4 .main {
		position: absolute;
		top: 25%;
		right: 20%;
		width: 250px;
		margin: 0 auto;
	}

	.content4 .main .mp1 {
		font-size: 50px;
		font-weight: 700;
	}

	.content4 .main .mp2 {
		font-size: 25px;
		color: #33CC99;

	}

	.content4 .main .mp3,
	.content4 .main .mp4 {
		margin-top: 35px;
		font-size: 17px;
		color: #000000;
	}

	.text {
		width: 1000px;
		height: 800px;
		background-image: url(../assets/images/route7.jpg);
		margin: 0 auto;

	}

	.bottom {
		position: relative;
		width: 1900px;
		height: 930px;
		margin: 0 auto;
		background-image: url(../assets/images/route8.jpg);
	}

	.bottom .main {
		position: absolute;
		left: 37%;
		width: 440px;
		text-align: center;
		margin: 0 auto;
	}

	.bottom .main .mp1 {
		font-size: 50px;
		font-weight: 700;
		color: white;
	}

	.bottom .main .mp2 {
		font-size: 25px;
		color: black;

	}

	.bottom .main .mp3,
	.bottom .main .mp4 {
		margin-top: 35px;
		font-size: 17px;
		color: white;
	}

	.bottom .bottomimg {
		position: absolute;
		left: 28%;
		top: 25%;
		width: 770px;
		height: 414px;
		background-image: url(../assets/images/route9.png);
		background-repeat: no-repeat;
	}
</style>
